<template>
  <div>
    <div v-transfer-dom>
      <view-header head-title="页面不存在"/>
    </div>
    <div v-transfer-dom>
      <div class="error">
        <flexbox align="center" justify="center">
          <img src="../../../static/images/error.png" alt="" class="img">
        </flexbox>
        <flexbox align="center" justify="center" class="tip">
          页面不存在
        </flexbox>
        <flexbox align="center" justify="center">
          <a @click="$router.push('/')" class="btn" style=" ">返回首页</a>
        </flexbox>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: '404',
    data () {
      return {}
    },
    watch: {},
    components: {},
    computed: {},
    methods: {},
    created () {

    },
    mounted () {

    }
  }
</script>

<style scoped lang="less">
  .error{
    position: absolute;
    top: 4.0rem;
    width: 100%;
    .img{
      width: 5.12rem;
      height: 1.99rem;
    }
    .tip{
      color: @font-color-666;
      font-size: 0.40rem;
      margin-top: 0.53rem;
    }
    .btn{
      width: 3.60rem;
      height: 1.07rem;
      line-height: 1.07rem;
      text-align: center;
      color: #999;
      font-size: 0.43rem;
      margin-top: 0.53rem;
      border-radius: 5px; border: 1px solid #ddd;
      &:hover{
        background: #ff5a32;
        color: #fff;
      }
    }
  }

</style>
